<%@ page language="java" contentType="text/html; charset=ISO-8859-1"
    pageEncoding="ISO-8859-1"%>

<%@ taglib prefix="s" uri="/struts-tags"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<link rel="stylesheet" type="text/css" href="http://www.jscodes.com/codes/calendar_javascript/demo/css/datePicker.css" />
<script src="http://www.jscodes.com/codes/calendar_javascript/demo/js/jquery-1.6.1.min.js" type="text/javascript"></script>
<script src="http://www.jscodes.com/codes/calendar_javascript/demo/js/jquery.datePicker-min.js" type="text/javascript"></script>
<!--[if IE]><script type="text/javascript" src="http://www.jscodes.com/codes/calendar_javascript/demo/js/jquery.bgiframe.min.js"></script><![endif]-->

<script type="text/javascript">
  $(window).ready(function(){
  $('#date-pick').datePicker({clickInput:true});
  $('#date-picks').datePicker({clickInput:true});
});
</script>
<script type="text/javascript">
function doLocFilter(attrId,as)
{
		url=window.location.href;
		var n=url.indexOf("search");
		if(n > 0)
		{
			var subUrl = url.substring(0,n);
			url=subUrl+'filter?'+as+'='+attrId;
			//window.location.href=url;
			document.getElementById('filterForm').action=url;
			document.getElementById('filterForm').submit();
		}
		else
		{
			n = url.indexOf(as);
			urlLength = url.length;
			if(document.getElementById("loc_"+attrId).checked == false)
			{
				remstartidx = n + (as.length + "=".length);
				var mainUrl =  url.substring(0,n);
				var remaining = url.substring(remstartidx,urlLength);
				indexofend = remaining.indexOf('&');
				if(indexofend >= 0)
				{
					ids = remaining.substring(0,indexofend);
					rest = remaining.substring(indexofend,remaining.length);
				}
				else
				{
					rest = "";
					ids = remaining ;
				}
				var idsarr=ids.split(",");
				var newarr = "";
				for(j=0;j<idsarr.length;j++)
				{
					if(idsarr[j] != attrId)
					{
						newarr =  newarr +","+ idsarr[j] ;
					}
					
				}
				newarr = newarr.substring(1,newarr.length);
				newarr = as + "=" + newarr ;
				newurl = mainUrl + newarr + rest ;
				//window.location.href=newurl;
				document.getElementById('filterForm').action=newurl;
				document.getElementById('filterForm').submit();
			}
			else
			{
				if(n > 0)
				{
					remstartidx = n + (as.length + "=".length);
					mainUrl =  url.substring(0,n);
					remaining = url.substring(remstartidx,urlLength);
					newurl=mainUrl + as + "=" + attrId + "," + remaining ;
					//window.location.href=newurl;
					document.getElementById('filterForm').action=newurl;
					document.getElementById('filterForm').submit();
				}
				else
				{
					newurl = url + "&" + as + "=" + attrId ;
					//window.location.href=newurl;
					document.getElementById('filterForm').action=newurl;
					document.getElementById('filterForm').submit();
				}
			}
		}
}
	function doFilter(attrId,as)
	{
			url=window.location.href;
			var n=url.indexOf("search");
			if(n > 0)
			{
				var subUrl = url.substring(0,n);
				url=subUrl+'filter?'+as+'='+attrId;
				//window.location.href=url;
				document.getElementById('filterForm').action=url;
				document.getElementById('filterForm').submit();
			}
			else
			{
				n = url.indexOf(as);
				urlLength = url.length;
				if(document.getElementById("attribute_"+attrId).checked == false)
				{
					remstartidx = n + (as.length + "=".length);
					var mainUrl =  url.substring(0,n);
					var remaining = url.substring(remstartidx,urlLength);
					indexofend = remaining.indexOf('&');
					if(indexofend >= 0)
					{
						ids = remaining.substring(0,indexofend);
						rest = remaining.substring(indexofend,remaining.length);
					}
					else
					{
						rest = "";
						ids = remaining ;
					}
					var idsarr=ids.split(",");
					var newarr = "";
					for(j=0;j<idsarr.length;j++)
					{
						if(idsarr[j] != attrId)
						{
							newarr =  newarr +","+ idsarr[j] ;
						}
						
					}
					newarr = newarr.substring(1,newarr.length);
					newarr = as + "=" + newarr ;
					newurl = mainUrl + newarr + rest ;
					//window.location.href=newurl;
					document.getElementById('filterForm').action=newurl;
					document.getElementById('filterForm').submit();
				}
				else
				{
					if(n > 0)
					{
						remstartidx = n + (as.length + "=".length);
						mainUrl =  url.substring(0,n);
						remaining = url.substring(remstartidx,urlLength);
						newurl=mainUrl + as + "=" + attrId + "," + remaining ;
						//window.location.href=newurl;
						document.getElementById('filterForm').action=newurl;
						document.getElementById('filterForm').submit();
					}
					else
					{
						newurl = url + "&" + as + "=" + attrId ;
						//window.location.href=newurl;
						document.getElementById('filterForm').action=newurl;
						document.getElementById('filterForm').submit();
					}
				}
			}
	}
</script>
<form name="filterForm" id="filterForm" action="" method="post">
<input name="searchkey" type="hidden" value="${searchkey}" class="search_txt_box" />
</form>

<div class="lft_booking">
        <div class="book_title">Booking</div>
        <div class="search_box">
        <s:form method="post" name="simpleSearch" action="search">
          <input name="searchkey" type="text" value="${searchkey}" class="search_txt_box" />
          <input name="" type="button" class="go_btn" />
         </s:form> 
        </div>
        <ul>
          <li>
            <input name="it" id="date-pick" type="text" class="cal_txtbox" />
          </li>
          <li>
            <input name="its" id="date-picks" type="text" class="cal_txtbox" />
          </li>
          <li>Min</li>
          <li>Max</li>
          <li>
            <select name="" class="search_drop_down">
              <option>Any</option>
            </select>
          </li>
          <li>
            <select name="" class="search_drop_down">
              <option>Any</option>
            </select>
          </li>
          <li>Bedrooms</li>
          <li>Sleeps</li>
          <li>
            <select name="bedrooms" class="search_drop_down">
				<option>any</option>
				<option value="Bedrooms:Studio">Studio</option>
				<option value="Bedrooms:1">1</option>
				<option value="Bedrooms:2">2</option>
				<option value="Bedrooms:3">3</option>
				<option value="Bedrooms:4">4</option>
				<option value="Bedrooms:5">5</option>
				<option value="Bedrooms:6">6+</option>
			</select>
          </li>
          <li>
            <select name="sleep" class="search_drop_down">
				<option>any</option>
				<option value="Sleeps:1">1+</option>
				<option value="Sleeps:2">2+</option>
				<option value="Sleeps:3">3+</option>
				<option value="Sleeps:4">4+</option>
				<option value="Sleeps:5">5+</option>
				<option value="Sleeps:6">6+</option>
				<option value="Sleeps:7">7+</option>
				<option value="Sleeps:8">8+</option>
				<option value="Sleeps:9">9+</option>
				<option value="Sleeps:10">10+</option>
				<option value="Sleeps:11">11+</option>
				<option value="Sleeps:12">12+</option>
				<option value="Sleeps:13">13 or more</option>
			</select>
          </li>
        </ul>
        <p>Property Type</p>
        <div class="prop_type">
        <s:select cssClass="dd"
		headerKey="-1" headerValue="Any"
		list="producttype" 
		name="producttype" 
		value="producttype"
		 />
        </div>
        <p>Location Type</p>
        <ul class="loca_type">
           <s:iterator value="producttype" var="pt">
           	<li>
				<s:set name="k" value="key.uuid"/>
				<s:set name="selectedk" value="productType"/>
				<s:set name="checked" value="selectedFilter(#selectedk,#k)"/>
           	 	<input type="checkbox" name="loc_${key.uuid}" id ="loc_${key.uuid}" value="${key.uuid}" onclick="doLocFilter('${key.uuid}','productType');" <s:if test="%{#checked == true}">checked</s:if><s:if test="%{value == 0}">disabled</s:if>/>
           		${key.productType} (${value})
			</li>
           </s:iterator>
        </ul>
        <p>Features</p>
        <ul class="loca_type">
			<s:iterator value="featuresFilter" var="ff">
				<li>
					<s:set name="k" value="key.uuid"/>
					<s:set name="selectedk" value="amenities"/>
					<s:set name="checked" value="selectedFilter(#selectedk,#k)"/>
					<input name="attribute_${key.uuid}" id ="attribute_${key.uuid}" type="checkbox" value="${key.uuid}"  onclick="doFilter('${key.uuid}','amenities');" <s:if test="%{#checked == true}">checked</s:if><s:if test="%{value == 0}">disabled</s:if>/>
					${key.name} (${value})
				</li>
			</s:iterator>
        </ul>
        <p>Managed By</p>
        <ul class="loca_type">
			<s:iterator value="ownerCount" var="oc">
          <li>	
				 <s:set name="k" value="key"/>
				 <s:set name="selectedk" value="owner"/>
				 <s:set name="checked" value="selectedFilter(#selectedk,#k)"/>
				 <input name="attribute_${key}" id ="attribute_${key}"  type="checkbox" value="" value="${key}"  onclick="doFilter('${key}','owner');" <s:if test="%{#checked == true}">checked</s:if><s:if test="%{value == 0}">disabled</s:if>/>
					${key} (${value})
          </li>
          </s:iterator> 
        </ul>
        <p>Even More Filters</p>
        <ul class="loca_type">
		<s:iterator value="moreFilter" var="mf">
			<li>	
			<s:set name="k" value="key.uuid"/>
			<s:set name="selectedk" value="attractions"/>
			<s:set name="checked" value="selectedFilter(#selectedk,#k)"/>	
			<input name="attribute_${key.uuid}" id ="attribute_${key.uuid}" type="checkbox" value="${key.uuid}" onclick="doFilter('${key.uuid}','attractions');" <s:if test="%{#checked == true}">checked</s:if><s:if test="%{value == 0}">disabled</s:if>/>
			${key.name} (${value})
			</li>
		</s:iterator>
		</ul>
      </div>
